<template>
	<view>
		<view class="point-container">
			<view class="ct-img">
				<img src="@/static/info/jifen.jpeg" alt="" style="width: 100%; height: 100%;">
			</view>
			<view class="pc-content">
				<view class="my-point">
					我的积分
				</view>
				<view class="point-num">
					{{myPoints}}
				</view>
				<view class="point-detail" @click="pointsDetails">
					查看明细
				</view>
			</view>
			<view class="point-content">
				<view class="" v-for="(item,index) in pointList" :key="index" @click="pointBtn(index)"> 
					<view class="pc-img">
						<img :src="item.img" alt="" style="width: 100%; height: 100%; border-radius: 50%;">
					</view>
					<view class="pc-name">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>
		<view class="user-point">
			<view class="up-title">作品积分活动</view>
			<view class="up-content" v-if="userPointList.length == 0">暂无积分活动</view>
		    <view class="" v-else>
		    	<view class="has-content" v-for="(item,index) in userPointList" :key="index">
		    	     <view class="content-display">
		    	     	<view class="hc-name">
		    	     		{{item.name}}
		    	     	</view>
		    	     	<view class="hc-time">
		    	     		{{item.startTime}}~{{item.stopTime}}
		    	     	</view>
		    	     </view>
					
		    	<view class="content-display" style="margin-top: 20rpx;">
					<view class="hc-goodNum">点赞数：{{item.like}}</view>
					<view class="hc-reward">
						奖励积分：{{item.rewardPoints}}
					</view>
					</view>
		    	</view>
		    </view>
			
		</view>
	</view>
</template>

<script>
	import {pointsEventsWorks} from '@/utils/api.js'
	export default {
		data() {
			return {
				pointList: [

					{
						img: '../../static/info/shangcheng.png',
						name: "积分商城"
					},
					{
						img: '../../static/info/gouwu.png',
						name: "购物车"
					},
					{
						img: '../../static/info/dingdan.png',
						name: "我的订单"
					},
					{
						img: '../../static/info/guize.png',
						name: "积分规则"
					},

				],
				userPointList: [],
				myPoints:uni.getStorageSync('trainneInfo')?Number(uni.getStorageSync('trainneInfo').points) :0,
			}
		},
		methods: {
           pointBtn(index){
			   if(index == 0){
				 uni.navigateTo({
				 	url:'/pages/info/pointsShop'
				 })
			   }else if(index == 1){
				   uni.navigateTo({
				   	url:'/pages/info/shopCar'
				   })
			   }else if(index == 2){
				   uni.navigateTo({
				   	url:'/pages/info/myOrder'
				   })
			   }else if(index == 3){
				   uni.navigateTo({
				   	url:'/pages/info/pointRule'
				   })
			   }
		   },
		   pointsDetails(){
			   uni.navigateTo({
			   	url:'/pages/info/pointsDetails'
			   })
		   },
		   async pointsEventsWorks(){
		   	uni.showLoading()
		   	const {code,rows} = await pointsEventsWorks()
		   	if(code == 200){
		   		uni.hideLoading()
		   	    this.userPointList = rows
		   	}
		    	
		   },
		},
		onLoad() {
			this.pointsEventsWorks()
		}
	}
</script>

<style>
	.point-container {
		position: relative;
	}

	.ct-img {
		width: 100%;
		height: 400rpx;
	}

	.pc-content {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 30%;
		color: #ffffff;
	}

	.my-point {
		text-align: center;
		font-weight: bold;
		color: #ffaa00;
		font-size: 32rpx;
	}

	.point-num {
		text-align: center;
		margin-top: 20rpx;
		color: #ffaa00;
	}

	.point-detail {
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #7091ff;
		/* opacity: 0.4; */
		border-radius: 50rpx;
		margin-top: 20rpx;
	}

	.point-content {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
		position: absolute;
		width: 100%;
		bottom: -150rpx;
	}

	.pc-img {
		width: 80rpx;
		height: 80rpx;
		margin: 0 auto;
	}

	.pc-name {
		font-size: 22rpx;
		margin-top: 10rpx;
		text-align: center;
	}

	.user-point {
		width: 100%;
		margin-top: 170rpx;
		background-color: #ffffff;
	}

	.up-title {
		font-weight: bold;
		margin-left: 40rpx;
		padding-top: 30rpx;
	}

	.up-content {
		text-align: center;
		padding: 60rpx 0;
	}
	.has-content{
		background-color: #f6f6f6;
		width: 95%;
		margin: 20rpx auto;
		padding: 10rpx;
		border-radius: 10rpx;
		
	}
	.content-display{
		display: flex;
		justify-content: space-between;
	}
	.hc-name{
		font-weight: bold;
		font-size: 34rpx;
	}
</style>